<template>
  <div>
    <!-- <div style="width: 100%;height: 380px;" class="echarts-box" ref="chart"></div> -->
  </div>
</template>

<script>
export default {
  name: 'UiIndex',

  data() {
    return {}
  },

  mounted() {
    this.initEchart()
  },

  methods: {
    initEchart() {
      let myChart = this.$echarts.init(this.$refs.chart, null, {
        renderer: 'svg',
      })

      let result = [
        {
          name: '制造业',
          value: 5713,
          itemStyle: { color: '#FF7734' },
        },
        {
          name: '信息传输、软件和信息技术服务业',
          value: 3022,
          itemStyle: { color: '#FFC700' },
        },
        {
          name: '科学研究和技术服务业',
          value: 2647,
          itemStyle: { color: '#34FFE7' },
        },
        { name: '金融业', value: 2291 },
        { name: '批发和零售业', value: 1946 },
        { name: '交通运输、仓储和邮政业', value: 1812 },
        { name: '教育', value: 1756 },
        { name: '建筑业', value: 1712 },
        { name: '房地产业', value: 1666 },
        { name: '水利、环境和公共设施管理业', value: 1621 },
      ]

      let option = {
        backgroundColor: '#000416',

        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          backgroundColor: 'rgba(21, 60, 142, 0.8)',
          borderColor: '#4DFFEA',
          borderWidth: 1,
          borderRadius: 5,
          textStyle: {
            color: '#BCE9FC',
            fontSize: 14,
            align: 'left',
          },
          confine: true,
        },
        grid: {
          left: '200',
          right: '16%',
          top: '15%',
          bottom: '8%',
        },
        xAxis: { show: false },
        yAxis: [
          {
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            type: 'category',
            axisTick: {
              show: false,
            },
            inverse: true,
            data: [
              '制造业',
              '信息传输、软件和信息技术服务业',
              '科学研究和技术服务业',
              '金融业',
              '批发和零售业',
              '交通运输、仓储和邮政业',
              '教育',
              '建筑业',
              '房地产业',
              '水利、环境和公共设施管理业',
            ],
            axisLabel: {
              color: '#fff',
              fontSize: 14,
              margin: 10,
              formatter: (name, index) => {
                const id = index + 1
                if (id < 4) {
                  return `{icon${id}|${id}}`
                } else {
                  return `{count|${id}}`
                }
              },
              rich: {
                icon1: {
                  width: 30,
                  height: 25,
                  padding: [5, 0, 2, 0],
                  align: 'center',
                  backgroundColor: 'rgba(255, 84, 0, 0.50)',
                  borderColor: '#FF7734',
                  borderWidth: 1,
                  color: '#ffffff',
                  fontSize: 20,
                },

                icon2: {
                  width: 30,
                  height: 25,
                  padding: [5, 0, 2, 0],
                  align: 'center',
                  backgroundColor: 'rgba(250, 195, 0, 0.50)',
                  borderColor: '#FFC700',
                  borderWidth: 1,
                  color: '#ffffff',
                  fontSize: 20,
                },
                icon3: {
                  width: 30,
                  height: 25,
                  padding: [5, 0, 2, 0],
                  align: 'center',
                  backgroundColor: 'rgba(52, 255, 206, 0.50)',
                  borderColor: '#34FFE7',
                  borderWidth: 1,
                  color: '#ffffff',
                  fontSize: 20,
                },
                count: {
                  width: 30,
                  height: 25,
                  padding: [5, 0, 2, 0],
                  align: 'center',
                  backgroundColor: 'rgba(0, 190, 250, 0.10)',
                  borderColor: '#00A3FF',
                  borderWidth: 1,
                  color: '#00A3FF',
                  fontSize: 20,
                },
              },
            },
          },
          {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              textStyle: {
                color: '#fff',
                fontSize: 14,
                padding: [0, 0, 5, 0],
              },
              formatter: function (value) {
                return value + '个'
              },
            },
            data: result.map((item) => item.value),
          },
        ],
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: 10, // 柱子宽度
            showBackground: true,
            backgroundStyle: {
              color: '#194B72',
            },
            color: '#00A0E9',
            label: {
              show: true,
              offset: [10, -16],
              color: '#fff',
              fontWeight: 500,
              position: 'left',
              align: 'left',
              formatter: function (params) {
                return params.data.name
              },
            },
            data: result,
          },
        ],
      }

      myChart.setOption(option)
    },
  },
}
</script>

<style lang="scss" scoped>
</style>